<template>
  <div class="user-set">
    <div class="user-card card-shadow text-center">
      <image :src="userInfo.avatarUrl" class="logo" />
    </div>
    <form class="block" bindsubmit="formSubmit">
      <div class="form-box card-shadow">
        <view class="section flex-box">
          <i class="label">用户昵称</i>
          <p class="flex-1">{{userInfo.nickName}}</p>
          <!-- <input maxlength="50" class="flex-1" name="userName" v-model="userName" type="text" placeholder="请输入昵称" /> -->
        </view>
        <view class="section flex-box">
          <i class="label">手机号</i>
          <p class="flex-1">{{tel}}</p>
          <!-- <input maxlength="50" class="flex-1" name="tel" v-model="tel" type="text" placeholder="请输入手机号" /> -->
        </view>
        <view class="section flex-box">
          <i class="label">性别</i>
          <p class="flex-1">{{sexText[userInfo.gender]}}</p>
          <!-- <div class="flex-1">
            <radio-group class="flex-box width100" @change="sexChange">
              <label class="flex-1" v-for="item in sexList" :key="index">
                <radio :value="item.value" :checked="item.value == sex" />
                <span class="sex-name">{{item.name}}</span>
              </label>
            </radio-group>
          </div> -->
          
        </view>
      </div>
      <div class="bottom-btn-box text-center">
        <button class="btn-light" @tap="getBack">返回</button>
      </div>
    </form>
  </div>
</template>

<script>
import cookie from '@/utils/cookie'
export default {
  components: {
  },

  data () {
    const userInfo = wx.getStorageSync('userInfo')

    return {
      // 性别 0：未知、1：男、2：女
      sexText: ['未知', '男', '女'],
      tel: cookie.getCookie('name'),
      userInfo: userInfo || {
        nickName: '',
        gender: '',
        avatarUrl: ''
      }
      // sexList: [
      //   { name: '男', value: '1' },
      //   { name: '女', value: '2' }
      // ]
    }
  },
  methods: {
    sexChange (e) {
      this.sex = e.mp.detail.value
      console.log(typeof this.sex)
    },
    getBack () {
      wx.navigateBack({ delta: 1 })
    }
  },
  beforeMount () {
    if (!this.cookie.isLogin()) {
      wx.navigateTo({ url: '/pages/login/main' })
    }
  }
}
</script>

<style lang="less">
  .user-set{
    font-size: 14px;
    .user-card{
      height: 160px;
      padding: 35px 15px 0;
      .logo{
        width: 78px;
        height: 78px;
        margin: 0 auto 6px;
        border-radius: 50%;
      }
    }
    .form-box {
      padding-left: 16px;
      margin-bottom: 190px;
      .section {
        align-items: center;
        padding: 18px 0 10px;
        border-bottom: 1px solid #efefef;
        .label {
          width: 64px;
          margin-right: 14px;
        }
        .sex-name{
          margin-left: 4px;
        }
      }
    }
    .bottom-btn-box{
      padding: 22px;
    }
  }
</style>
